import { useSelector, useDispatch, ArticleModelState, } from "umi";
import { useEffect } from "react";
import styles from './archives.less';
import Reading from "@/components/Reading";
import Category from "@/components/category";

export default function ArchivesPage() {
  let dispatch = useDispatch(),
    { archiveList, archiveLength } = useSelector((state: { article: ArticleModelState }) => state.article)

  useEffect(() => {
    dispatch({
      type: 'article/getArchiveList'
    })
  }, [])

  // 时间格式化
  let getTimes = (time: number) => {
    let date = new Date(time),
      M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
      D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate();
    return `${M}-${D}`
  }

  return (
    <div className={styles.archive}>
      <section>
        <div>
          <div className={styles.title}>
            <div><span>归档</span></div>
            <div>共计 <span>{archiveLength}</span> 篇</div>
          </div>
          <div className={styles.list}>
            <h2>2022</h2>
            <div className={styles.sublist}>
              <h3>January</h3>
              <ul>
                {archiveList.map((v, i) => (
                  <li key={i}>
                    <a href={`/article/${v.id}`}>
                      <span className={styles.time}>{getTimes(new Date(v.publishAt).getTime())}</span>
                      <span className={styles.title}>{v.title}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
      <aside>
        <Reading />
        <Category />
      </aside>
    </div>
  );
}